<script setup lang="ts">
import { ref } from 'vue'

import { InvesSubmitted } from '../../../http/api'








const loading = ref(false)
const list = ref<any>()
const query = async (val: number) => {
    if (input.value === '') return
    InvesSubmitted(input.value).then((res: any) => {
        if (res.school_name !== '') {
            dialogVisible.value = true
            list.value = res
        }

    })
    input.value = ''
}
const input = ref<string>('')






const dialogVisible = ref(false)





</script>

<template>
    <el-row>
        <el-col :span="20" :offset="2">
            <div class="dw-table-form" style="padding-left: 60px;">
                <div class="chooseArea">
                    <span>学校名称:</span>
                    <span>
                        <el-input v-model="input" placeholder="请输入学校名称" />
                    </span>
                    <!-- <span>问卷类别:</span> -->
                    <!-- <span>
                        <el-switch v-model="value.tFlag"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" inline-prompt
                            active-text="教师" size="large" inactive-text="学生" />
                    </span> -->
                    <!-- <span style="display:flex;align-items:center">
                        选择地区：
                        <cascader :check="true" :msg="'area'" @change="change" />
                    </span> -->
                </div>
                <div class="query">
                    <!-- <el-button type="success" @click="download" class="button" :loading="dowmloadLOading">下载问卷
                    </el-button> -->
                    <el-button type="primary" @click="query" class="button" :loading="loading">查询</el-button>
                </div>
            </div>
            <!-- <div class="dw-table">
                <el-table :data="data.data" stripe style="width: 100%" v-if="!value.tFlag">
                    <el-table-column prop="stu_name" label="学生姓名" />
                    <el-table-column prop="school_city" label="所在城市" />
                    <el-table-column prop="school_district" label="所在地区" />
                    <el-table-column prop="school_name" label="学校名称" />
                    <el-table-column prop="class" label="班级" />
                    <el-table-column prop="age" label="出生年月" />
                </el-table>
                <el-table :data="data.data" stripe style="width: 100%" v-else>
                    <el-table-column prop="user_id" label="教师id" />
                    <el-table-column prop="school_name" label="学校名称" />
                    <el-table-column prop="school_city" label="城市" />
                    <el-table-column prop="school_district" label="地区" />
                </el-table>
                <div class="dw-pagination">
                    <pagination :total="data.total_records" @current-change="query" :page-count="data.total_pages" />


                </div>
            </div> -->
        </el-col>
    </el-row>


    <el-dialog v-model="dialogVisible" title="查看提交数" width="30%">
        <el-descriptions title="" :column="1" border>
            <el-descriptions-item label="已提交的学生总数">{{ list.student }}</el-descriptions-item>
            <el-descriptions-item label="已提交的教师总数">{{ list.teacher }}</el-descriptions-item>
            <el-descriptions-item label="合计">{{ list.total }}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<style lang="scss" scoped>
.chooseArea {
    display: flex;
    align-items: center;
    margin: 20px;

    >span {
        margin: 0 5px;
    }
}

.query {
    margin: 0px 0px 20px 20px;

    .button {
        padding: 20px;
        width: 120px;
    }
}

.dw-table-form {
    background-color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}

.dw-table {
    background: white;
    padding: 20px;
}

.dw-pagination {
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>